<template>
  <div>
    <!-- 轮播图 -->
    <Banner/>

    <div class="container mx-auto px-4 py-12">
      <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div
            v-for="category in categories"
            :key="category.id"
            class="group relative rounded-lg overflow-hidden cursor-pointer"
            @click="navigateToCategory(category.value)"
        >
          <img :src="category.url" :alt="category.name"
               class="w-full h-40 object-cover transition-transform group-hover:scale-110">
          <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center">
            <span class="text-white text-xl font-bold">{{ category.name }}</span>
          </div>
        </div>
      </div>
    </div>

    <div class="container mx-auto px-4 py-12">
      <h2 class="text-3xl font-bold text-center mb-12">热门推荐</h2>
      <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">
        <FlowerCard
            v-for="flower in hotFlowers"
            :key="flower.id"
            :flower="flower"
        />
      </div>
    </div>

    <div class="bg-gray-50 py-12">
      <div class="container mx-auto px-4">
        <h2 class="text-3xl font-bold text-center mb-12">节日专题</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          <div
              v-for="theme in themes"
              :key="theme.id"
              class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-shadow"
          >
            <img :src="theme.image" :alt="theme.title" class="w-full h-48 object-cover">
            <div class="p-4">
              <h3 class="text-xl font-bold mb-2">{{ theme.title }}</h3>
              <p class="text-gray-600 mb-4">{{ theme.subtitle }}</p>
              <el-button
                  type="primary"
                  plain
                  round
                  @click="navigateToTheme(theme.id)"
              >
                查看详情
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="container mx-auto px-4 py-12">
      <h2 class="text-3xl font-bold text-center mb-12">花语寓意</h2>
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        <div
            v-for="meaning in flowerMeanings"
            :key="meaning.id"
            class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow"
        >
          <div class="flex items-center mb-4">
            <img :src="meaning.icon" :alt="meaning.flower" class="w-12 h-12 object-cover rounded-full mr-4">
            <h3 class="text-xl font-bold">{{ meaning.flower }}</h3>
          </div>
          <p class="text-gray-600">{{ meaning.meaning }}</p>
        </div>
      </div>
    </div>

    <div class="bg-gray-50 py-12">
      <div class="container mx-auto px-4">
        <h2 class="text-3xl font-bold text-center mb-12">我们的优势</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
          <div v-for="(feature, index) in features" :key="index" class="text-center">
            <el-icon :size="48" class="text-primary mb-4">
              <component :is="feature.icon"/>
            </el-icon>
            <h3 class="text-xl font-semibold mb-2">{{ feature.title }}</h3>
            <p class="text-gray-600">{{ feature.description }}</p>
          </div>
        </div>
      </div>
    </div>

<!--    <div class="container mx-auto px-4 py-12">-->
<!--      <h2 class="text-3xl font-bold text-center mb-12">顾客评价</h2>-->
<!--      <el-carousel :interval="4000" type="card" height="300px">-->
<!--        <el-carousel-item v-for="review in reviews" :key="review.id">-->
<!--          <div class="h-full bg-white rounded-lg shadow-lg p-6 flex flex-col justify-between">-->
<!--            <div>-->
<!--              <p class="text-gray-600 italic mb-4">"{{ review.content }}"</p>-->
<!--              <div class="flex items-center">-->
<!--                <img :src="review.avatar" :alt="review.name" class="w-12 h-12 rounded-full mr-4">-->
<!--                <div>-->
<!--                  <h4 class="font-bold">{{ review.name }}</h4>-->
<!--                  <div class="flex text-yellow-400 max-sm:hidden">-->
<!--                    <el-icon v-for="n in 5" :key="n">-->
<!--                      <Star/>-->
<!--                    </el-icon>-->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </el-carousel-item>-->
<!--      </el-carousel>-->
<!--    </div>-->
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import {useRouter} from 'vue-router'
import {Box, Star, Van} from '@element-plus/icons-vue'
import FlowerCard from '@/components/common/FlowerCard.vue'
import Banner from '@/components/home/Banner.vue'
import {getClassify, getHotProducts, getThemeList} from "@/api/products.js";

// 快捷分类
const categories = ref([])

onMounted(async () => {
  const {data: classify} = await getClassify()
  categories.value = classify.filter((_, index) => index < 4)
  const {data:hot} = await getHotProducts()
  hotFlowers.value = hot
  const {data:theme} = await getThemeList()
  console.log(theme)
  themes.value = theme
})

const router = useRouter()

// 热门推荐商品
const hotFlowers = ref([])
// 节日专题
const themes = ref([])

// 花语寓意
const flowerMeanings = [
  {
    id: 1,
    flower: '红玫瑰',
    meaning: '热烈的爱情，真诚的爱意',
    icon: 'https://pic.nximg.cn/file/20221216/33102792_122033355109_2.jpg'
  },
  {
    id: 2,
    flower: '白百合',
    meaning: '纯洁、高贵、深深的祝福',
    icon: 'https://pic.nximg.cn/file/20221216/33102792_122033355109_2.jpg'
  },
  {
    id: 3,
    flower: '康乃馨',
    meaning: '母爱、感恩、温暖',
    icon: 'https://pic.nximg.cn/file/20221216/33102792_122033355109_2.jpg'
  }
]

// 我们的优势
const features = [
  {
    icon: Van,
    title: '快速配送',
    description: '全城配送，2小时送达'
  },
  {
    icon: Box,
    title: '优质保障',
    description: '鲜花保鲜，品质保证'
  },
  {
    icon: Star,
    title: '优质服务',
    description: '专业花艺师，精心搭配'
  }
]

// 用户评价
const reviews = [
  {
    id: 1,
    content: '花很新鲜，包装很精美，送货速度也很快，很满意的一次购物体验！',
    name: '张女士',
    avatar: 'https://pic.nximg.cn/file/20221216/33102792_122033355109_2.jpg'
  },
  {
    id: 2,
    content: '第二次购买了，质量依然很好，客服态度也很好，值得推荐！',
    name: '李先生',
    avatar: 'https://pic.nximg.cn/file/20221216/33102792_122033355109_2.jpg'
  },
  {
    id: 3,
    content: '母亲节给妈妈订的康乃馨，妈妈很喜欢，花店的服务很贴心。',
    name: '王女士',
    avatar: 'https://pic.nximg.cn/file/20221216/33102792_122033355109_2.jpg'
  }
]

const navigateToCategory = (category) => {
  router.push({
    path: '/products',
    query: {category}
  })
}

const navigateToTheme = (themeId) => {
  router.push({
    name: 'Theme',
    params: {id: themeId}
  })
}
</script>

<style scoped>
.el-carousel__item {
  padding: 0 12px;
}

@media (max-width: 768px) {
  .el-carousel {
    padding: 0 20px;
  }
}
</style>
